<template>
	<view class="category-container">
		<!-- 左侧主分类 -->
		<scroll-view class="main-category" scroll-y="true">
			<view v-for="item in categoryList" :key="item.id"
				:class="['category-item', activeMain === item.id ? 'active' : '']" @tap="selectMainCategory(item)">
				<text>{{item.title}}</text>
			</view>
		</scroll-view>

		<!-- 右侧子分类 -->
		<scroll-view class="sub-category" scroll-y="true">
			<view class="sub-category-grid">
				<view class="sub-item" v-for="item in subCategories" :key="item.name" @tap="goToList(item)">
					<image :src="`/static/img/${item.img}`" mode="aspectFit" />
					<text>{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeMain: 1, // 默认选中第一个主分类
				categoryList: [{
						id: 1,
						title: '笔记本',
						list: [{
								name: '联想/Lenovo'
							},
							{
								name: '惠普/HP'
							},
							{
								name: '戴尔/DELL'
							},
							{
								name: '苹果/APPLE'
							},
							{
								name: '华为/HUAWEI'
							},
							{
								name: '小米/MI'
							},
						]
					},
					{
						id: 2,
						title: '手机',
						list: [{
								name: '华为（HUAWEI）'
							},
							{
								name: '荣耀（HONOR）'
							},
							{
								name: '苹果（iPhone）'
							},
							{
								name: '三星（Samsung Galaxy）'
							},
							{
								name: '小米（Xiao Mi）'
							},
							{
								name: 'OPPO'
							},
							{
								name: 'VIVO'
							}
						]
					},
					{
						id: 3,
						title: '航拍影音',
						list: [{
								name: '大疆/DJI'
							},
							{
								name: '派诺特/Parrot'
							},
							{
								name: '哈博森/Hubsan'
							},
							{
								name: '臻迪/PowerVision'
							},
							{
								name: '诺巴曼/NuoBaMan'
							},
							{
								name: '亿航/Ehang'
							},
						]
					},
					{
						id: 4,
						title: '办公设备',
						list: [{
								name: '传真机'
							},
							{
								name: '打字机'
							},
							{
								name: '扫描仪'
							},
							{
								name: '座机电话'
							},
							{
								name: '电传机'
							},
						]
					},
					{
						id: 5,
						title: '摄像机',
						list: [{
								name: 'SONY索尼'
							},
							{
								name: 'Canon佳能'
							},
							{
								name: 'Panasonic松下'
							},
							{
								name: '杰伟世JVC'
							},
							{
								name: 'GoPro'
							},
							{
								name: '佳明GARMIN'
							},
						]
					},
					{
						id: 6,
						title: '二手优品',
						list: [{
								name: '手机'
							},
							{
								name: '笔记本'
							},
							{
								name: '摄像机'
							},
							{
								name: '平板'
							},
							{
								name: '办公设备'
							},
							{
								name: '航拍影音'
							},
						]
					},
				],
				subCategories: [] // 右侧子分类
			};
		},
			
				methods: {
					selectMainCategory(item) {
						this.activeMain = item.id;
						this.subCategories = item.list; // 更新子分类列表
					},
		
					// 添加跳转逻辑到商品列表页面
					goToList(item) {
						if (item.name === '联想/Lenovo') {
							uni.navigateTo({
								url: '/pages/community/communtiy1/communtiy1' // 跳转到 community1 页面
							});
						} else {
							uni.navigateTo({
								url: `/pages/product/list?category=${item.name}` // 其他分类跳转逻辑
							});
						}
					},
			},
	};
</script>

<style scoped>
	.category-container {
		display: flex;
		height: 100vh;
	}

	.main-category {
		width: 30%;
		padding: 10px;
	}

	.sub-category {
		width: 70%;
		padding: 10px;
		overflow-y: auto;
		/* 确保内容过多时可以滚动 */
	}

	.category-item {
		margin: 10px 0;
		padding: 10px;
		background-color: #f0f0f0;
		border-radius: 5px;
		transition: background-color 0.3s;
		/* 过渡效果 */
	}

	.category-item.active {
		background-color: #007BFF;
		color: white;
	}

	.sub-category-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.sub-item {
		width: calc(40% - 10px);
		/* 调整宽度以适应更多列 */
		margin-top: 15px;
		/* 单独设置上间距 */
		margin-bottom: 15px;
		/* 单独设置下间距 */
		padding: 10px;
		background-color: #f8f8f8;
		text-align: center;
		border-radius: 8px;
		/* 圆角更大 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		/* 添加阴影 */
		transition: transform 0.3s, box-shadow 0.3s;
		/* 过渡效果 */
	}

	.sub-item:hover {
		transform: translateY(-5px);
		/* 鼠标悬停时上移 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
		/* 鼠标悬停时阴影加深 */
	}

	.sub-item image {
		width: 100%;
		height: auto;
		border-radius: 5px;
	}

	.sub-item text {
		margin-top: 10px;
		font-weight: 500;
		/* 字体加粗 */
		color: #333;
		/* 字体颜色更深 */
	}
</style>